import React, { useRef } from 'react'
import { StyleSheet, View, Button, TextInput, Text } from 'react-native'
import CustomInput, { CustomInputRef } from './CustomInput'
import CustomInput2 from './CustomInput2'

const RefDemo = () => {
  const inputRef = useRef<CustomInputRef>(null)
  const inputRef2 = useRef<CustomInput2>(null)
  return (
    <View style={styles.root}>
      <View style={styles.btn}>
        <Button
          title="聚焦"
          onPress={() => {
            // inputRef.current?.customFocus()
            inputRef2.current?.customFocus(); // 类组件的
            inputRef2.current?.customXXX();
          }}
        />
        <Button
          title="失焦"
          onPress={() => {
            // inputRef.current?.customBlur()
            inputRef2.current?.customBlur(); // 类组件的
          }}
        />
      </View>
      <Text>==============函数式=================</Text>
      <CustomInput ref={inputRef} />
      <Text>===============类组件================</Text>
      <CustomInput2 ref={inputRef2} />
    </View>
  )
}
const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 500,
    backgroundColor: 'white',
    paddingHorizontal: 20,
    paddingTop: 10
  },
  btn: {
    display: 'flex',
    marginBottom: 10
  },
})
export default RefDemo
